<template>
	<view class="doubleBackHeader" :style="{ height: navbarHeight + 'px', backgroundColor: props.backgroundColor }">
		<view class="titleBar" :style="{ height: capsuleHeight + 'px', top: TimeBarHeight + 'px' }">
			<view class="iconitembox" :style="{ height: capsuleButton + 'px'}">
				<image @click="backPageit('back')" src="@/static/bar/返回.png" mode=""></image>
				<view class="iconWordIndex">|</view>
				<image @click="backPageit('home')" src="@/static/eIcones/首页.png" mode=""></image>
			</view>
			<text class="title">{{title}}</text>
		</view>
	</view>
</template>

<script setup>
	import {TimeBarHeight,capsuleHeight,navbarHeight,capsuleButton,} from '@/config/systemInfo.js'
	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		backgroundColor: {
			type: String,
			default: '#fff'
		},
	});
	const backPageit = (keyword) =>{
		console.log('xxx');
		keyword=='back'? uni.navigateBack({
	        delta: 1
	    }):uni.reLaunch({
	    	url:'/pages/home/index'
	    })
	}
</script>

<style lang="scss" scoped>
	.doubleBackHeader{
		width: 100%;
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
		.titleBar{
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding: 0 20rpx;
			box-sizing: border-box;
			gap: 5rpx;
			.iconitembox{
				display: flex;
				align-items: center;
				border: 1px solid #e6e6e6;
				border-radius: 40rpx;
				padding: 0 25rpx;
				gap: 10rpx;
				position: absolute;
				left: 20rpx;
				z-index: 10;
				.iconWordIndex{
					color:#e6e6e6;
					font-weight: 100;
				}
				image{
					width: 21px;
					height: 21px;
				}
			}
			.title{
				width: 100%;
				position: absolute;
				text-align: center;
			}
		}
	}
</style>